<template>
	<view>
		<!-- CPU信息 -->
		<view
			:style="{backgroundImage: 'url('+'/static/backgrounds/cpu.jpg'+')'+';height:1280rpx;background-attachment:fixed'}">
			<view v-if="type==0">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{cpus.title}}</text>
					<view class="padding-top-lg">{{cpus.describe}}</view>
				</view>

				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in cpus.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">
							<view class="flex align-center">
								<view class=" text-xl">{{item.numberOfCores}}</view>
								<view class="margin-left-sm">核心</view>
							</view>

							<view class="flex align-center">
								<view class=" text-xl">{{item.clockSpeed}}</view>
								<view class="margin-left-sm">GHz</view>
							</view>

							<view class="flex align-center">
								<view class="text-price text-red text-xl">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>
							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'cpu',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'cpu',item)">
							<image src="/static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
					</view>
				</scroll-view>
			</view>
			<!-- GPU信息 -->
			<view v-if="type==1">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{gpus.title}}</text>
					<view class="padding-top-lg">{{gpus.describe}}</view>
				</view>
				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in gpus.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">
							<view class="flex align-center">
								<view class=" text-xl">{{item.calcCapability}}</view>
								<view class="margin-left-sm">TFLOPS</view>
							</view>

							<view class="flex align-center">
								<view class=" text-xl">{{item.gpuMemory}}</view>
								<view class="margin-left-sm">GB显存</view>
							</view>

							<view class="flex align-center">
								<view class="text-price text-red text-xl">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>
							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'gpu',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'gpu',item)">
							<image src="/static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
					</view>
				</scroll-view>
			</view>
			<!-- 内存信息 -->
			<view v-if="type==2">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{mems.title}}</text>
					<view class="padding-top-lg">{{mems.describe}}</view>
				</view>
				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in mems.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">
							<view class="flex align-center">
								<view class=" text-xl">{{item.capacity}}</view>
								<view class="margin-left-sm">GB</view>
							</view>

							<view class="flex align-center">
								<view class="text-price text-red text-xl">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>
							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'mem',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'mem',item)">
							<image src="/static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
					</view>
				</scroll-view>
			</view>
			<!-- 磁盘信息 -->
			<view v-if="type==3">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{disks.title}}</text>
					<view class="padding-top-lg">{{disks.describe}}</view>
				</view>
				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in disks.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">
							<view class="flex align-center">
								<view class=" text-xl">{{item.capacity}}</view>
								<view class="margin-left-sm">GB</view>
							</view>
							<view class="flex align-center">
								<view class="text-xl">{{item.throughput}}</view>
								<view class="margin-left-sm">MB/s</view>
							</view>
							<view class="flex align-center">
								<view class="text-price text-red text-xl">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>
							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'disk',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'disk',item)">
							<image src=" /static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;">
							</image>
						</button>
					</view>
				</scroll-view>
			</view>

			<!-- 操作系统信息 -->
			<view v-if="type==4">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{oss.title}}</text>
					<view class="padding-top-lg">{{oss.describe}}</view>
				</view>
				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in oss.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">
							<view class="flex align-center">
								<view class=" text-xl">{{item.name}}</view>
								<view class="margin-left-sm"></view>
							</view>
							<view class="flex align-center">
								<view class="text-xl">{{item.osBit}}</view>
								<view class="margin-left-sm">位</view>
							</view>
							<view class="flex align-center">
								<view class="text-xl">{{item.loginMethod}}</view>
								<view class="margin-left-sm">登录</view>
							</view>
							<view class="flex align-center">
								<view class="text-price text-red text-xl">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>
							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'os',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'os',item)">
							<image src=" /static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;">
							</image>
						</button>
					</view>
				</scroll-view>
			</view>
			<!-- 数据库信息 -->
			<view v-if="type==5">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{dbs.title}}</text>
					<view class="padding-top-lg">{{dbs.describe}}</view>
				</view>
				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in dbs.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">

							<view class="flex align-center">
								<view class="text-xl">{{item.capacity}}</view>
								<view class="margin-left-sm">GB</view>
							</view>

							<view class="flex align-center">
								<view class="text-price text-red text-xl">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>
							</view>
							<view class="flex align-center">
								<view class="margin-right-sm"></view>
								<view class="text-xl">{{item.provider}}</view>

							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'db',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'db',item)">
							<image src="/static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
					</view>
				</scroll-view>
			</view>

			<!-- 网卡信息 -->
			<view v-if="type==6">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{nics.title}}</text>
					<view class="padding-top-lg">{{nics.describe}}</view>
				</view>

				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in nics.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">
							<view class="flex align-center">
								<view class=" text-xl">{{item.bandwidth}}</view>
								<view class="margin-left-sm">M/S带宽</view>
							</view>



							<view class="flex align-center">
								<view class="text-price text-red text-xl">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>
							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'nic',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;">
							</image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'nic',item)">
							<image src="/static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;">
							</image>
						</button>
					</view>
				</scroll-view>
			</view>
			<!-- 支持与服务信息 -->
			<view v-if="type==7">
				<view class="padding-lg">
					<text class="title text-lg text-bold">{{supports.title}}</text>
					<view class="padding-top-lg">{{supports.describe}}</view>
				</view>
				<scroll-view scroll-y style="height: 800rpx;">
					<view v-for="(item,index) in supports.data" style="border-radius: 20rpx;"
						class=" bg-white margin-lg flex align-center">
						<view class="padding-lg">

							<view class="flex align-center">
								<view class="text-xl">{{item.response}}</view>
								<view class="margin-left-sm">小时报修</view>
							</view>

							<view class="flex align-center">
								<view class=" text-xl">{{item.present}}</view>
								<view class="margin-left-sm">小时到场</view>

							</view>
							<view class="flex align-center">
								<view class="text-xl text-price text-red">{{item.price}}</view>
								<view class="margin-left-sm">元/月</view>

							</view>
						</view>

						<button class="margin-left-xl cu-btn flex align-center" @click="addToCar(0,'support',item)">
							<image src="/static/backgrounds/car_blue.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
						<button class="margin-left-xl cu-btn " @click="addToCar(1,'support',item)">
							<image src="/static/backgrounds/car_orange.svg" style="height: 40rpx;width: 80rpx;"></image>
						</button>
					</view>
				</scroll-view>
			</view>
		</view>

		<view @click="toManagement()" style="position: fixed;bottom: 0;width:100%;background-color: #EBECF1;"
			class="flex padding-sm">
			<view class="flex-twice flex align-center">
				<image class="margin-left-xl" src="/static/backgrounds/car_blue.svg" style="height: 80rpx;width: 80rpx;"
					@tap="GoManagement"></image>
				<view class="margin-left-sm">
					<view class="flex align-center">产品<view class="text-xl text-blue">{{cars[0].count}}</view>件</view>
					<view class="flex align-center">总价<view class="text-xl text-blue">{{cars[0].price}}</view>元</view>
				</view>
			</view>

			<view class="flex-twice flex align-center">
				<image class="margin-left-xl" src="/static/backgrounds/car_orange.svg"
					style="height: 80rpx;width: 80rpx;" @tap="GoManagement"></image>

				<view class="margin-left-sm">
					<view class="flex align-center">产品<view class="text-xl text-orange">{{cars[1].count}}</view>件</view>
					<view class="flex align-center">总价<view class="text-xl text-orange">{{cars[1].price}}</view>元</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "common_info",
		data() {
			return {
				type: 0,
				cpus: {
					title: "中央处理器",
					describe: "CPU一般指中央处理器。 中央处理器（Central Processing Unit，简称CPU）作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元。",
					data: [{
							numberOfCores: "2",
							clockSpeed: "2.5",
							price: "15",
							cpuId: 0
						},
						{
							numberOfCores: "4",
							clockSpeed: "2.2",
							price: "20"
						}, {
							numberOfCores: "8",
							clockSpeed: "2.8",
							price: "40",
							cpuId: 1
						},
						{
							numberOfCores: "16",
							clockSpeed: "2.6",
							price: "80",
							cpuId: 2
						}

					]
				},
				gpus: {
					title: "图形处理器",
					describe: "图形处理器（英语：graphics processing unit，缩写：GPU），又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑、智能手机等）上做图像和图形相关运算工作的微处理器。",
					data: [{
							gpuMemory: "2",
							calcCapability: "7",
							price: "40",
							gpuId: 0
						},
						{
							gpuMemory: "4",
							calcCapability: "10",
							price: "80",
							gpuId: 0
						}, {
							gpuMemory: "8",
							calcCapability: "20",
							price: "120",
							gpuId: 0
						}

					]
				},
				mems: {
					title: "内存",
					describe: "内存(Memory)是计算机的重要部件，也称内存储器和主存储器，它用于暂时存放CPU中的运算数据，以及与硬盘等外部存储器交换的数据。它是外存与CPU进行沟通的桥梁，计算机中所有程序的运行都在内存中进行，内存性能的强弱影响计算机整体发挥的水平。",
					data: [{
							capacity: "2",
							price: "20",
							memoryId: 0
						},
						{
							capacity: "4",
							price: "40",
							memoryId: 0
						}, {
							capacity: "6",
							price: "60",
							memoryId: 0
						}

					]
				},
				disks: {
					title: "磁盘",
					describe: "磁盘（disk）是指利用磁记录技术存储数据的存储器。磁盘是计算机主要的存储介质，可以存储大量的二进制数据，并且断电后也能保持数据不丢失。早期计算机使用的磁盘是软磁盘（Floppy Disk，简称软盘），如今常用的磁盘是硬磁盘（Hard disk，简称硬盘）。",
					data: [{
							capacity: "10",
							throughput: "100",
							price: "20",
							diskId: 0
						},
						{
							capacity: "50",
							throughput: "250",
							price: "60",

							diskId: 0
						}, {
							capacity: "100",
							throughput: "500",
							price: "100",
							diskId: 0
						}, {
							capacity: "500",
							throughput: "1000",
							price: "250",
							diskId: 0
						}

					]
				},
				oss: {
					title: "操作系统",
					describe: "操作系统（英语：Operating System，缩写：OS）是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件程序。根据运行的环境，操作系统可以分为桌面操作系统，手机操作系统，服务器操作系统，嵌入式操作系统等。",
					data: [{
							name: "CentOS",
							osBit: "64",
							loginMethod: "SSH",
							price: "0",
							osId: 0
						},
						{
							name: "Ubuntu",
							osBit: "64",
							loginMethod: "SSH",
							price: "0",
							osId: 0
						},
						{
							name: "Windows",
							osBit: "64",
							loginMethod: "密码",
							price: "40",
							osId: 0
						},
						{
							name: "Windows",
							osBit: "32",
							loginMethod: "密码",
							price: "20",
							osId: 0
						},

					]
				},
				cars: [{
					count: 0,
					price: 0
				}, {
					count: 0,
					price: 0
				}],
				nics: {
					title: "网卡",
					describe: "网卡（英语：Network interface card，缩写：NIC）网卡是工作在第二层链路层的网络组件，是局域网中连接计算机和传输介质的接口，不仅能实现与局域网传输介质之间的物理连接和电信号匹配，还涉及帧的发送与接收、帧的封装与拆封、介质访问控制、数据的编码与解码以及数据缓存的功能等。",
					data: [{
							bandwidth: "500",
							ipCount: "3",
							price: "15",
							nicId: "0"
						},
						{
							bandwidth: "700",
							ipCount: "5",
							price: "20",
							nicId: "0"

						},
						{
							bandwidth: "800",
							ipCount: "5",
							price: "22",
							nicId: "0"
						},
						{
							bandwidth: "1000",
							ipCount: "8",
							price: "30",
							nicId: "0"
						},


					]
				},
				dbs: {
					title: "数据库",
					describe: "数据库（英语：dbs，缩写：DB）数据库（dbs）是按照数据结构来组织、存储和管理数据的仓库。每个数据库都有一个或多个不同的 API 用于创建，访问，管理，搜索和复制所保存的数据。",
					data: [{
							id: "2",
							capacity: "2",
							price: "15",
							provider: "Oracle"
						},
						{
							id: "3",
							capacity: "3",
							price: "20",
							provider: "MySQL"

						},
						{
							id: "4",
							capacity: "4",
							price: "25",
							provider: "MySQL"
						},
						{
							id: "5",
							capacity: "4",
							price: "30",
							provider: "SQL Server"
						},

					]
				},
				supports: {
					title: "支持与服务",
					describe: "客户服务与支持，是客户关系管理中的重要部分。 它有利于产生客户的纵向及横向销售业务，从而为客户提供产品质量、业务研讨、现场服务、订单跟踪、客户关心、服务请求、服务合同、维修调度、纠纷解决等服务。",
					data: [{
							id: "200",
							response: "3",
							present: "10",
							price: "300"
						},
						{
							id: "500",
							response: "5",
							present: "15",
							price: "500"

						},
						{
							id: "1500",
							response: "8",
							present: "20",
							price: "668"
						},
						{
							id: "3500",
							response: "15",
							present: "25",
							price: "1888"
						},

					]
				},
			};
		},
		onLoad(option) {
			this.type = option.select
			console.log("invoke onload");

			uni.request({
				url: this.$url + "getAllProduct",
				header: {
					"Authorization": this.$sa_token.value
				},
				success: (resp) => {
					this.$set(this.cpus, "data", resp.data.cpus)
					this.$set(this.gpus, "data", resp.data.gpus)
					this.$set(this.oss, "data", resp.data.oss)
					this.$set(this.mems, "data", resp.data.mems)
					this.$set(this.dbs, "data", resp.data.dbs)
					this.$set(this.disks, "data", resp.data.disks)
					this.$set(this.nics, "data", resp.data.nics)
					this.$set(this.supports, "data", resp.data.supports)
				}
			})
		},
		methods: {
			GoManagement() {
				uni.switchTab({
					url: '/pages/management/management'
				});
			},
			checkCar(car, clazz) {
				var count = 0
				var price = 0
				var prods = ['cpu', 'gpu', 'mem', 'disk', 'os', 'db', 'nic', 'support']
				for (var index in prods) {
					if (car[prods[index]].price != undefined) {
						count++
						price += Number(car[prods[index]].price)
					}
				}
				return {
					"price": price,
					"count": count
				}
			},
			onShow() {
				for (var i = 0; i < 2; i++) {
					this.cars[i].price = this.$shoppingcar.cars[i].totalPrice
					this.cars[i].count = this.$shoppingcar.cars[i].itemCount
				}
			},
			addToCar(carId, productClass, product) {
				this.$shoppingcar.cars[carId][productClass] = product
				var res = this.checkCar(this.$shoppingcar.cars[carId], productClass)
				this.$shoppingcar.cars[carId].totalPrice = res.price
				this.$shoppingcar.cars[carId].itemCount = res.count
				this.$set(this.cars, carId, res)
			},
			toManagement() {
				console.log("Hello");
				uni.switchTab({
					url: "/pages/management/management"
				})
			}
		}
	}
</script>

<style>

</style>